import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:grint/constant/colors.dart';
import 'package:grint/constant/icon_font.dart';
import 'package:grint/widget/black_button.dart';
import 'package:grint/widget/border_text.dart';
import 'package:grint/widget/my_text.dart';

class SciencePage extends StatefulWidget {
  const SciencePage({super.key});

  @override
  State<SciencePage> createState() => _SciencePageState();
}

class _SciencePageState extends State<SciencePage> {
  List<String> steps = [
    'Start with outer and inner surfaces, and brush at a 45-degree angle in short, half-tooth-wide strokes against the gum line. Make sure you reach your back teeth.',
    'Move on to chewing surfaces. Hold the brush flat and brush back and forth along these surfaces.',
    'Once you get to the inside surfaces of your front teeth, tilt the brush vertically and use gentle up-and-down strokes with the tip of brush.',
    'Be sure to brush your teeth gently along the gum line.',
    'Brush your tongue in a back-to-front sweeping motion to remove food particles and help remove odour-causing bacteria to freshen your breath.',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/commonBg.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          bottom: false,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // biaoti
                  Row(
                    children: [
                      BlackButton(
                        icon: IconFontIcons.iconArrowLeft,
                        onTap: () => context.pop(),
                      ),
                      Expanded(
                        child: Center(
                          child: MyText(
                            text: 'Science',
                            type: TextType.rubik,
                            fontSize: 26.sp,
                            color: AppColors.black,
                          ),
                        ),
                      ),
                      SizedBox(width: 36.w),
                    ],
                  ),

                  SizedBox(height: 16.h),

                  Container(
                    constraints: BoxConstraints(maxWidth: 289.w),
                    child: BianKuangText(
                      text: 'Brushing Teeth Scientifically',
                      color: AppColors.white,
                      borderColor: AppColors.black,
                      textSize: 26.sp,
                      borderWidth: 3.w,
                    ),
                  ),

                  SizedBox(height: 16.h),

                  Image.asset(
                    'assets/images/science-image.png',
                    width: double.infinity,
                    fit: BoxFit.cover,
                  ),

                  SizedBox(height: 8.h),

                  MyText(
                    text: '*Based on surveys carried out for P&G regularly. ',
                    type: TextType.miSans,
                    fontSize: 14.sp,
                    color: AppColors.black,
                    fontWeight: FontWeight.w300,
                  ),

                  SizedBox(height: 10.h),

                  Container(
                    constraints: BoxConstraints(maxWidth: 289.w),
                    child: BianKuangText(
                      text: 'Positioning the Toothbrush',
                      color: AppColors.black,
                      borderColor: AppColors.white,
                      textSize: 26.sp,
                      borderWidth: 3.w,
                    ),
                  ),

                  SizedBox(height: 16.h),

                  Column(
                    children: List.generate(
                      steps.length,
                      (index) => Container(
                        width: double.infinity,
                        margin: EdgeInsets.only(
                          bottom: index < steps.length - 1 ? 12.h : 0,
                        ),
                        padding: EdgeInsets.all(16.w),
                        decoration: BoxDecoration(
                          color: AppColors.white,
                          borderRadius: BorderRadius.circular(12.r),
                          border: Border.all(
                            color: AppColors.black,
                            width: 2.w,
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            MyText(
                              text: 'Step ${index + 1}',
                              type: TextType.rubik,
                              fontSize: 16.sp,
                              color: AppColors.black,
                              fontWeight: FontWeight.bold,
                            ),
                            SizedBox(height: 8.h),
                            MyText(
                              text: steps[index],
                              type: TextType.miSans,
                              fontSize: 14.sp,
                              color: AppColors.black,
                              fontWeight: FontWeight.normal,
                              maxLines: null,
                              overflow: TextOverflow.visible,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 60.h),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
